<template>
	<view class="container safe-area-inset-bottom" v-show="bagData.picture != undefined ? true : false">
		<image class="bag-img" :src="bagData.picture" mode=""></image>
		<view class="bag-box box1">
			<view class="bag-pic"> ￥{{bagData.price}} </view>
			<button class="share" open-type="share">
				<image class="share-ioc" src="http://app.chinasrv.com/attachment/xcx/icon/icon29.png" mode="aspectFill"></image>
				<text>分享</text>
			</button>
		</view>
		<view class="bag-box box2">
			<view class="bag-title"> {{bagData.title}} </view>
			<view class="bag-scj"> 市场价 ￥{{bagData.market_price}} </view>
			
		</view>
		<view class="bag-box box3">
			<view class="bag-ui"> 销量 {{bagData.sales}} </view>
			<view class="bag-ui"> 库存 {{bagData.stock}} </view>
			<view class="bag-ui"> 分期数 {{bagData.batch_num}} </view>
		</view>
		
		<readMore :intro="bagData.intro"></readMore>
		
		<view class="box-br" :style="'height:' + (bottomHeight+60) + 'rpx;'"> </view>
		
		<view :class="bagData.isBuyer == '0' ? 'but-box' : 'but-box_no'" :style="'height:' + bottomHeight + 'rpx;'">
			<button :class="bagData.isBuyer == '0' ? 'but' : 'but_no'" @click="buyItem()"> 立即购买 </button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">提交订单</view>
				<view class="address" style="padding: 10rpx 50rpx;border-bottom: 1rpx solid #ccc;font-weight: unset;" v-if="pickupList.length > 0" v-for="(pickup, index2) in pickupList">
					<view :class="payData.pickup_id == pickup.id ?'check':'nocheck'" @click="checkPickup(pickup.id)"></view>
					<view class="right" style="margin-left: 20rpx;">
						<view class="txt">
							<text>{{pickup.title}}</text>
							<text>{{pickup.mobile}}</text>
						</view>
						<view class="txt1">
							{{pickup.address}}
						</view>
					</view>
				</view>
				<view class="paypir">
					<text>开通费用</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="use_hdq > 0"  @click="setUseOther(1)">
					<text>使用互动券 {{use_hdq}} 抵扣金额 ￥{{use_hdq}}</text>
					<view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
				</view>
				<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{account.user_money}}</text>
					<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(account.user_money) >= Number(pay_money)"></view>
					<text v-else @click="jump('on_line_recharge')">余额不足</text>
				</view>
				<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
                <view class="line2" v-if="bagData.payRemark != ''" style="text-align: center;color: red;display: block;">{{bagData.payRemark}}</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认提交</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import serve from '../static/request.js';
import storage from '../static/appkey.js';
import common from '../static/jump.js';
import {readMore} from '../components/read-more/read-more';
import wechatPay from '../static/wechatPay.js';
export default {
	components:{readMore : readMore},
	data() {
		return {
			id : 0,
			bagData:{},
			bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
			shareItem: {
				title: '',
				path: '',
				imageUrl: ''
			},
            account: {
                money: 0,
                user_money: 0,
                user_hdq: 0,
                sure_hdq: 0,
            },
			pickupList: [],
            payData: {
                appkey: uni.getStorageSync('appkey'),
                'access-token': uni.getStorageSync('access-token'),
                id: 0,
                is_use_hdq: 0,
                payment_type: 1,
				pickup_id: 0,
            },
            isPay: true,
            pay_money: 0,
            use_hdq : 0,
		}
	},
	onLoad(options) {
		if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
			this.bottomHeight = 158;
		}
		this.id = options.id || 0;
        this.payData.id = this.id;
	},
	onShow(){
		this.loadData();
		this.getShareItem();
	},
	methods: {
		loadData: function() {
			serve.request({
			    url: '/shop/bag/view',
			    data: {
			        appkey: uni.getStorageSync('appkey'),
			        'access-token': uni.getStorageSync('access-token'),
			        id: this.id
			    }
			}).then(res => {
			    if(res.code != 200) {
			        uni.showToast({
			            title: res.message,
			            icon : 'none',
			            success:function(){ 
			                setTimeout(function () { 
			                    this.jump('product_list')
			                }, 2000) 
			            } 
			        });
			        return;
			    }
			    this.bagData = res.data;
                this.account = res.data.account;
				this.pickupList = res.data.pickupList;
				this.payData.pickup_id = this.pickupList[0].id;
			});
		},
		checkPickup(pid) {
			this.payData.pickup_id = pid;
		},
		getShareItem(){
			serve.request({
		        url: '/share/index',
		        data: {
		            appkey: uni.getStorageSync('appkey'),
		            'access-token': uni.getStorageSync('access-token'),
		            type: 'bag',
		            id: this.id
		        }
		    }).then(res => {
		        this.shareItem.title = res.data.title;
		        this.shareItem.path = res.data.path;
		        this.shareItem.imageUrl = res.data.imageUrl;
		    });
		},
		buyItem() {
            if(this.bagData.isBuyer == 1) {
                uni.showModal({
                    title: '提示',
                    content: this.bagData.buyerError,
                    showCancel: false,
                    success: function (res) {
                    },
                });
                return ;
            }
            this.calculationTotalMoney();
			this.$refs.popup.open();
		},
        setUseOther(type) {
        	if(type == 1) {
        		this.payData.is_use_hdq = this.payData.is_use_hdq == 1 ? 0 : 1;
        	} 
        	this.calculationTotalMoney();
            this.$forceUpdate();
        },
        selPayType(payType) {
        	if(payType == 5 && Number(this.account.user_money) < Number(this.pay_money)) {
        		return ;
        	}
        	this.payData.payment_type = payType;
            this.$forceUpdate();
        },
        calculationTotalMoney() {
            this.pay_money = JSON.parse(JSON.stringify(this.account.money));
            let totalHdq =  JSON.parse(JSON.stringify(this.account.sure_hdq));
            if(totalHdq > 0 && this.account.user_hdq > 0) {
                this.use_hdq = this.account.user_hdq > totalHdq ? totalHdq : this.account.user_hdq;
            	if(this.payData.is_use_hdq) {
            		this.pay_money = Number(this.pay_money) - Number(this.use_hdq);
            	}
            }
            this.$forceUpdate();
        },
        close() {
            this.$refs.popup.close();
        },
		subPayForm() {
			serve.request({
				url: '/shop/bag/buy',
				data: this.payData
			}).then(res => {
				if(res.code == 200) {
					if(res.data.isPay == 1){
						wechatPay.payItemFun(res.data.payType, res.data.itemId, '/myOrder/order/storeView?id='+res.data.itemId);
					} else {
						uni.redirectTo({
							url: '/myOrder/order/storeView?id='+res.data.itemId
						});
					}
					return ;
				} 
				uni.showToast({
					title: res.message,
					icon : 'none'
				});
			});
		},
		/* 页面跳转 */
		jump(jump_type, jump_link = 0){
			common.jump(jump_type,jump_link);
		},
	},
	/* 下拉刷新 */
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 5e2);
	},
	/* 滑动到底部加载 */
	onReachBottom() {
			
	},
	onShareAppMessage(res) {
		console.info(this.shareItem);
		return this.shareItem;
	},
};
</script>

<style lang="scss" scoped>

page, .container{
	width: 100vw;
	background-color: #F1F1F1;
	font-size: 0;
}
.bag-img{
	width: 100vw;
	height: 100vw;
	
}
.bag-box{
	padding: 14rpx 0;
	font-size: 32rpx;
	background: #FFFFFF;
	padding: 18rpx 36rpx;
	width: 678rpx;
}
.box1{
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
}


.bag-pic{
	font-size: 40rpx;
	color: rgba(255, 198, 0, 1);
}

.share{
	    position: absolute;
		right: 20rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border: 1px solid #e5e5e5;
	    border-radius: 8rpx;
	    background: #f9f9f9;
	    width: 180rpx;
	    height: 70rpx;

}
.share-ioc{
	width: 32upx;
	height: 32upx;
	margin-right: 10upx;
}
.share text{
	font-size: 28upx;
	margin-left: 12rpx;
}

.box2{
	
}

.bag-title{
	overflow: hidden;
	// white-space: nowrap;
	// text-overflow: ellipsis;
	font-weight: bold;
}
.bag-scj{
	margin-top: 18rpx;
	color: #999999;
	    border-bottom: 1px solid #e5e5e5;
		height: 72rpx;
}

.box3{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 30rpx;
	    color: #999999;
	    margin-bottom: 20rpx;
	    height: 80rpx;
	    padding: 0 36rpx 20rpx 36rpx;
}
.bag-ui{}

.box-br{
	width: 100vw;
	height: 100rpx;
}

.but-box{
	position: fixed;
	bottom: 0;
	background-color: rgba(255, 200, 10, 1);
	width: 100vw;height: 100rpx;
}
.but-box_no{
	position: fixed;
	bottom: 0;
	background-color: #d8d8d8;;
	width: 100vw;height: 100rpx;
}

.but{
	    position: relative;
	    width: 100vw;
	    height: 88rpx;
	    border-radius: 0;
		border: 0;
	    color: #FFFFFF;
	    font-size: 40rpx;
		text-indent : 20rpx;
	    background-color: rgba(255, 200, 10, 1);
	&::after{
		border: 0;
	}
	&::before{
		border: 0;
	}
}
.but_no{
	    position: relative;
	    width: 100vw;
	    height: 88rpx;
	    border-radius: 0;
		border: 0;
	    color: #a9a9a9;
	    font-size: 40rpx;
		text-indent : 20rpx;
	    background-color: #d8d8d8;
	&::after{
		border: 0;
	}
	&::before{
		border: 0;
	}
}

.pay_type{
	position: relative;
	width: 100%;
	background: #FFFFFF;
	padding-bottom: 140upx;
	.close{
		position: absolute;
		width:23upx;
		height:23upx;
		right: 40upx;
		top: 45upx;
	}
	.title{
		width: 100%;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		font-size: 36upx;
		border-bottom: 1upx #EBECF0 solid;
	}
	.paypir{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 50upx 0upx 20upx;
		font-size: 28upx;
		color: #FF5F60;
		text:last-child{
			color: #FF5F60;
			font-size: 40upx;
			font-weight: bold;
			margin-top: 10upx;
		}
	}
	.line2{
		width: 100%;
		box-sizing: border-box;
		padding: 36upx;
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #333333;
		border-bottom: 1upx #EBECF0 solid;
		.txt{
			color: #999999;
		}
		.nosel {
			width: 36upx;
			height: 36upx;
			border: 1upx solid rgba(60, 72, 104, 1);
			border-radius: 50%;
		}
		.sel {
			background-image: url(../static/img/check.png);
			background-repeat: no-repeat;
			width: 40upx;
			height: 40upx;
			background-size: 100%;
		}
		.nocheck {
			width: 36upx;
			height: 36upx;
			border: 1upx solid rgba(60, 72, 104, 1);
			border-radius: 20%;
		}
		.check {
			background: url(../static/img/checkbox_check.png);
			background-repeat: no-repeat;
			width: 40upx;
			height: 40upx;
			background-size: 100%;
		}
	}
	.pay_bot {
	  width: 100%;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  height: 100upx;
	  background: #FFBC00;
	  color: #fff;
	  font-size: 32upx;
	  line-height: 100upx;
	  text-align: center;
	  border-radius: 0;
	  &::after{
		  border: none;
	  }
	}
	.address {
		display: flex;
		position: relative;
		padding: 53upx 70upx;
		font-size: 28upx;
		font-weight: bold;
		align-items: center;
	
		image {
			position: absolute;
			left: 30upx;
			width: 31upx;
			height: 37upx;
			top: 120upx;
		}
	
		.txt {
			display: flex;
			justify-content: space-between;
			padding-bottom: 28upx;
		}
	
		.jt {
			position: absolute;
			right: 30upx;
			top: 105upx;
			content: '';
			border: 1upx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}
	}
	.nocheck {
		width: 36upx;
		height: 36upx;
		border: 1upx solid rgba(60, 72, 104, 1);
		border-radius: 20%;
	}
	.check {
		background: url(../static/img/checkbox_check.png);
		background-repeat: no-repeat;
		width: 40upx;
		height: 40upx;
		background-size: 100%;
	}
}
</style>
